<template>
    <div>
        <div class="headerSty1" style="margin: 20px 0 10px;">
            <div class="headerLeftSty">
                <div class="textSty">合同确认</div>
            </div>
            <div>
                <el-form label-width="160px" ref="form" :model="form" :rules="rules">
                    <el-row>
                        <el-col :span="18">
                            <el-form-item label-width="40px">
                                <div class="headerLeftSty">
                                    <div class="navSty"></div>
                                    <div class="textSty1" style="margin-left: 10px;">项目成员</div>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="项目负责人" prop="projectSaveDTO.projectLeader">
                                <!-- @change="updateEngineer" -->
                                <el-select v-model="form.projectSaveDTO.projectLeader" placeholder="请选择" clearable
                                    :style='{ "width": "100%" }' v-if="form.projectSaveDTO" @change="updateLeader">
                                    <el-option v-for="(item, index) in relOptions" :key="index" :label="item.nickName"
                                        :value="item.userId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="一级消防注册工程师" prop="projectSaveDTO.engineer">
                                <el-select v-model="form.projectSaveDTO.engineer" placeholder="请选择" clearable multiple filterable
                                    :style='{ "width": "100%" }' v-if="form.projectSaveDTO" @change="removeTag">
                                    <el-option v-for="(item, index) in relOptions" :key="index" :label="item.nickName"
                                        :value="item.userId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="中级消防设施操作员" prop="projectSaveDTO.operators">
                                <el-select v-model="form.projectSaveDTO.operators" placeholder="请选择" clearable
                                    :style='{ "width": "100%" }' multiple v-if="form.projectSaveDTO">
                                    <el-option v-for="(item, index) in relAOptions" :key="index" :label="item.nickName"
                                        :value="item.userId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="批准人" prop="approverId">
                                <el-select v-model="form.approverId" placeholder="请选择" clearable
                                    :style='{ "width": "100%" }'>
                                    <el-option v-for="(item, index) in relOptions" :key="index" :label="item.nickName"
                                        :value="item.userId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item label="合同模板选择">
                                <el-radio-group @input="listAcc" v-model="radio">
                                    <el-radio label="1">平台</el-radio>
                                    <el-radio label="2">机构</el-radio>
                                </el-radio-group>

                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label-width="5px" label="" prop="templateId">
                                <el-select v-model="form.templateId" placeholder="请选择" :style='{ "width": "50%" }'>
                                    <el-option v-for="(item, index) in relModelOptions" :key="index" :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="合同名称" prop="name">
                                <el-input v-model="form.name" placeholder="请输入" clearable>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row
                        v-if="(form.contractRichText && form.status == 10) || form.status == 4 || form.status == 10">
                        <el-col :span="24">
                            <el-form-item label="">
                                <el-button type="primary" @click="generateContract">生成合同</el-button>
                            </el-form-item>
                        </el-col>
                        <!-- 合同预览 -->
                        <el-col :span="24">
                            <el-form-item label-width="40px">
                                <div class="headerSty" style="width: 100%;">
                                    <div class="headerLeftSty" style="flex: 1;">
                                        <div class="navSty"></div>
                                        <div class="textSty1" style="margin-left: 10px;color: rgb(90, 156, 248);">合同预览
                                        </div>
                                    </div>
                                    <div>
                                        <el-button type="primary" v-if="btnState" @click="updateState">编辑合同</el-button>
                                        <el-button type="primary" v-else @click="recoverContract">复原</el-button>
                                        <el-button type="primary" v-if="!btnState"
                                            @click="updateContract">保存</el-button>
                                    </div>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label-width="40px" v-if="btnState">
                                <div class="rickSty">
                                    <div v-html="textRich">
                                    </div>
                                </div>
                            </el-form-item>
                            <el-form-item label-width="40px" v-else>
                                <EditorPlus :min-height="512" v-model="textRich" />
                            </el-form-item>

                        </el-col>
                        <el-col :span="24">
                            <el-form-item label-width="120px" label="文档附件" style="font-weight: normal;">
                                <el-upload class="upload-demo" :limit="10" :action="uploadUrl"
                                    :before-remove="beforeRemove" :file-list="fileList" :on-success="handleFileSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                    <div slot="tip" class="el-upload__tip">
                                        支持格式：.rar .zip .doc .docx .pdf ，单个文件不能超过20MB
                                    </div>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label-width="40px">
                                <el-button v-if="btnState" class="btnFirSty"
                                    @click="handleSignatureDetail">点击签章并生成合同文件</el-button>

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <!-- 已生成合同 -->
                        <el-col :span="18">
                            <el-form-item label-width="40px">
                                <div class="headerLeftSty">
                                    <div class="navSty"></div>
                                    <div class="textSty1" style="margin-left: 10px;color: rgb(90, 156, 248);">已生成合同
                                    </div>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label-width="40px">
                                <div class="rickSty">
                                    <div v-html="textRichAcc">
                                    </div>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label-width="40px">
                                <el-button type="danger" @click="downloadContract"
                                    :loading="btnLoading">合同下载</el-button>
                                <el-button type="primary" @click="submitContract"
                                    v-if="form.status == 4 || form.status == 10">提交</el-button>
                            </el-form-item>

                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <signatureDetail v-if="signatureDetailVisible" ref="signatureRef" @refreshSignature="refreshSignature" />
    </div>
</template>
<script>
import {
    getUserListType, getTemplateList, getTemplatePublicList, createContract,
    getContractPreview, putContract, dowRichText, getUpAnnex, getCustomerDetail, saveUpAnnex, getTemplateListTpe,
    downloadContractAll, sendMsgCode, validateCode
} from "@/api/contract/contractOrg"
import { tansParams, blobValidate } from "@/utils/ruoyi";
import { saveAs } from 'file-saver'
import signatureDetail from './cp/signature.vue'
export default {
    components: {
        signatureDetail
    },
    props: {
        dataForm: {
            type: Object,
            default: {},
        }
    },
    data() {
        const checkCompare = (rule, value, callback) => {
            if (this.form.projectSaveDTO.projectLeader) {
                if (this.form.projectSaveDTO.projectLeader == value) {
                    callback(new Error('批准人与项目负责人不能是同一人'));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        }
        const checkCompare1 = (rule, value, callback) => {
            if (!this.form.approverId) callback();
            if (this.form.approverId != value) callback();
            callback(new Error('批准人与项目负责人不能是同一人'));
        }
        return {
            form: {
                projectSaveDTO: {
                    engineer: null,
                    operators: null,
                    projectLeader: null
                },
            },
            // 表单校验
            rules: {
                name: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                approverId: [
                    { required: true, validator: checkCompare, trigger: 'change' }
                ],
                'projectSaveDTO.projectLeader': [
                    { required: true, validator: checkCompare1, trigger: 'change' }
                ],
                'projectSaveDTO.engineer': [
                    {
                        required: true,
                        message: '请选择',
                        trigger: "change"
                    }
                ],
                'projectSaveDTO.operators': [
                    {
                        required: true,
                        message: '请选择',
                        trigger: "change"
                    }
                ],
                templateId: [
                    {
                        required: true,
                        type: 'number',
                        message: '请选择',
                        trigger: ["change", "blur"]
                    }
                ]
            },
            tableData: [],
            reverse: true,
            btnState: true,
            radio: '1',

            relOptions: [],
            relAOptions: [],
            relModelOptions: [],
            // 富文本
            textRich: '',
            textRichAcc: '',
            uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",
            uploadList: [],
            fileList: [],
            signatureDetailVisible: false,
            btnLoading: false
        }
    },
    created() {

        this.getList()
        this.form.templateId = undefined
        if (Object.keys(this.dataForm).length !== 0 && this.dataForm.id != 0) {
            if (this.dataForm.projectSaveDTO) {
                this.form = { ...this.form, ...this.dataForm }
            } else {
                this.form = { ...this.dataForm, ...this.form }
            }

            if (this.dataForm.contractRichText) {
                this.textRichAcc = this.textRep(this.dataForm.contractRichText)
            }
            if (this.dataForm.templateId) {
                this.getTemplateIdList()
            }
            if ((this.dataForm.contractRichText && this.dataForm.status == 4) || (this.dataForm.contractRichText && this.dataForm.status == 10)) {
                getContractPreview(this.form.contractId).then(list => {
                    this.textRich = this.textRep(list.msg)
                })
            }
            if (this.dataForm.projectSaveDTO) {
                if (this.dataForm.projectSaveDTO.operators) {
                    this.getTypeOf()
                }
            }

        }
    },
    methods: {
        getList() {
            // 一级消防注册工程师/负责人
            getUserListType('03').then(res => {
                this.relOptions = res.data
            })
            // 中级消防设施操作员
            getUserListType('04').then(res => {
                this.relAOptions = res.data
            })
            getTemplatePublicList('CONTRACT').then(res => {
                this.relModelOptions = res.data
            })

            // 合同附件
            getUpAnnex(this.dataForm.id, '3').then(res => {
                for (let i = 0; i < res.data.length; i++) {
                    this.fileList.push({
                        name: res.data[i].fileName,
                        url: res.data.filePath
                    })
                }
            })
        },
        getTemplateIdList() {
            // 模板列表 isCommon true 平台
            getTemplateListTpe().then(res => {
                for (let i = 0; i < res.data.length; i++) {
                    if (res.data[i].id == this.dataForm.templateId) {
                        if (res.data[i].isCommon == true) {
                            this.radio = '1'
                            getTemplatePublicList('CONTRACT').then(list => {
                                this.relModelOptions = list.data
                            })
                        } else {
                            this.radio = '2'
                            getTemplateList('CONTRACT').then(list => {
                                this.relModelOptions = list.data
                            })
                        }
                    }
                }
            })
        },
        // 带出参数
        updateEngineer(id) {
            console.log(id, '>>>>>');
            this.form.projectSaveDTO.engineer = id
            // if (form.projectSaveDTO.engineer) {

            // }
        },
        // 移除
        removeTag() {
            if (!this.form.projectSaveDTO.engineer.includes(this.form.projectSaveDTO.projectLeader)) {
                this.form.projectSaveDTO.projectLeader = null
            }
        },
        // 修改负责人
        updateLeader() {
            if (!this.form.projectSaveDTO.engineer.includes(this.form.projectSaveDTO.projectLeader)) {
                this.form.projectSaveDTO.engineer.push(this.form.projectSaveDTO.projectLeader)
            }
        },
        //判定
        getTypeOf() {
            if (this.form.projectSaveDTO.operators) {
                if (typeof this.form.projectSaveDTO.operators === 'string') {
                    if (this.form.projectSaveDTO.operators.length) {
                        this.form.projectSaveDTO.operators = this.form.projectSaveDTO.operators.split(',').map(Number);
                    }
                }
            } else {
                // 可能需要设置一个默认值  
                this.form.projectSaveDTO.operators = [];
            }
            if (this.form.projectSaveDTO.engineer) {
                if (typeof this.form.projectSaveDTO.engineer === 'string') {
                    if (this.form.projectSaveDTO.engineer.length) {
                        this.form.projectSaveDTO.engineer = this.form.projectSaveDTO.engineer.split(',').map(Number);
                    }
                }
            } else {
                // 可能需要设置一个默认值  
                this.form.projectSaveDTO.engineer = [];
            }
        },
        // 模板切换
        listAcc(row) {
            this.form.templateId = undefined
            if (row == 2) {
                getTemplateList('CONTRACT').then(res => {
                    this.relModelOptions = res.data
                })
            } else {
                getTemplatePublicList('CONTRACT').then(res => {
                    this.relModelOptions = res.data
                })
            }
        },

        // 生成合同
        generateContract() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    let data = Object.assign({}, this.form)
                    if (data.projectSaveDTO.engineer) {
                        if (Array.isArray(data.projectSaveDTO.engineer)) {
                            data.projectSaveDTO.engineer = data.projectSaveDTO.engineer.join(',')
                        } else {
                            data.projectSaveDTO.engineer = data.projectSaveDTO.engineer
                        }
                    } else {
                        data.projectSaveDTO.engineer = ''
                    }
                    if (data.projectSaveDTO.operators) {
                        if (Array.isArray(data.projectSaveDTO.operators)) {
                            data.projectSaveDTO.operators = data.projectSaveDTO.operators.join(',')
                        } else {
                            data.projectSaveDTO.operators = data.projectSaveDTO.operators
                        }
                    } else {
                        data.projectSaveDTO.operators = ''
                    }
                    createContract(data).then(res => {
                        getContractPreview(res.data.contractId).then(list => {
                            // this.textRich = this.textRep(list.msg)
                            this.textRich = list.msg
                        })
                        this.getTypeOf()
                    })

                }
            })

        },
        // 下载合同
        downloadContract() {
            if (this.textRichAcc) {
                this.btnLoading = true
                downloadContractAll(this.form.contractId).then(async data => {
                    const isBlob = blobValidate(data.data);
                    const filename = decodeURIComponent(data.filename);
                    if (isBlob) {
                        saveAs(data.data, filename)
                    } else {
                        const resText = await data.text();
                        const rspObj = JSON.parse(resText);
                        const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
                        this.$modal.msgError(errMsg);
                    }
                    this.btnLoading = false
                })
            } else {
                this.$modal.msgWarning('暂无合同下载')// 
            }


        },
        // 跳转签章页面
        handleSignatureDetail() {
            if (!this.form.projectSaveDTO.projectLeader) {
                this.$modal.msgWarning('请选择负责人');
                return;
            }
            let tempRow = this.relOptions.find(i => i.userId == this.form.projectSaveDTO.projectLeader)
            this.$confirm(`此操作将会向负责人【${tempRow.nickName || '-'}】发送一条验证码，是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await sendMsgCode(this.dataForm.id);
                if (res.code === 200) {
                    this.$prompt('请输入验证码', '负责人验证', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /^\d{6}$/,
                        inputErrorMessage: '请正确输入验证码'
                    }).then(({ value }) => {
                        validateCode({
                            id: this.dataForm.id,
                            verificationEnum:  'SIGN_ORG',
                            code: value
                        }).then((v) => {
                            this.signatureDetailVisible = true;
                            this.$nextTick(() => {
                                this.$refs.signatureRef.init(this.form.contractId, this.form.projectSaveDTO.id);
                            });
                        })
                    }).catch(() => {});
                }
            }).catch(() => { });
        },
        updateState() {
            this.btnState = !this.btnState
        },
        recoverContract() {
            getContractPreview(this.form.contractId).then(list => {
                this.textRich = this.textRep(list.msg)
                this.btnState = !this.btnState
            })
        },
        // 保存
        updateContract() {
            putContract({
                contractRichText: this.textRich,
                id: this.form.contractId,
                serviceOrgStamp: null,
                serviceOrgSign: null
            }).then(res => {
                this.$emit('refreshConfirmationLoad')
                getCustomerDetail(this.form.contractId).then(res => {
                    this.textRich = this.textRep(res.data.contractRichText)
                    this.btnState = !this.btnState
                    this.textRichAcc = ""
                    this.form.serviceOrgStamp = null
                    this.form.serviceOrgSign = null
                });
            })
        },
        // 提交
        submitContract() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.textRichAcc) {
                        if (this.form.serviceOrgStamp) {
                            if (this.form.serviceOrgSign) {
                                this.requestList()
                            } else {
                                this.$modal.msgWarning('请选择签名')// 
                            }
                        } else {
                            this.$modal.msgWarning('请选择印章')// 
                        }
                    } else {
                        this.$modal.msgWarning('请生成合同并签章')// 
                    }
                }
            })
        },
        // 提交数据
        requestList() {
            let data = Object.assign({}, this.form)
            data.status = (data.status > 4 && data.status != 10) ? data.status : 5
            if (data.projectSaveDTO.operators) {
                if (Array.isArray(data.projectSaveDTO.operators)) {
                    data.projectSaveDTO.operators = data.projectSaveDTO.operators.join(',')
                } else {
                    data.projectSaveDTO.operators = data.projectSaveDTO.operators
                }
            } else {
                data.projectSaveDTO.operators = ''
            }
            if (data.projectSaveDTO.engineer) {
                if (Array.isArray(data.projectSaveDTO.engineer)) {
                    data.projectSaveDTO.engineer = data.projectSaveDTO.engineer.join(',')
                } else {
                    data.projectSaveDTO.engineer = data.projectSaveDTO.engineer
                }
            } else {
                data.projectSaveDTO.engineer = ''
            }
            // 保存附件
            if (this.uploadList.length) {
                let annexList = []
                for (let i = 0; i < this.uploadList.length; i++) {
                    if (this.uploadList[i].response) {
                        annexList.push({
                            fileName: this.uploadList[i].name,
                            filePath: this.uploadList[i].response.fileName,
                            type: 3
                        })
                    } else {
                        annexList.push({
                            fileName: this.uploadList[i].name,
                            filePath: this.uploadList[i].url,
                            type: 3
                        })
                    }
                }
                saveUpAnnex({ contractId: data.contractId, annexList }).then(res => {
                })
            }
            this.$nextTick(() => {
                this.$emit('refreshConfirmation', { ...data, contractRichText: this.textRichAcc })
            })
        },
        // 移除上传
        beforeRemove(file, fileList) {
            this.uploadList = fileList

        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.uploadList = fileList
        },
        // 文件上传前的大小
        beforeAvatarUpload(file) {
            const isRAR = file.type === 'application/x-rar-compressed';
            const isZIP = file.type === 'application/zip';
            const isMSOffice = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || // .docx  
                file.type === 'application/vnd.ms-word' || // .doc  
                file.type === 'application/pdf'; // .pdf  

            const isAccepted = isRAR || isZIP || isMSOffice;
            const isLt2M = file.size / 1024 / 1024 < 20;
            if (!isAccepted) {
                this.$message.error('上传文件格式不正确，请上传 .rar、.zip、.doc、.docx 或 .pdf 格式的文件！');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 20MB!');
            }
            return isAccepted && isLt2M;
        },
        // 再次请求
        twoRequest() {

        },
        // 处理富文本
        textRep(text) {
            let updatedContent = text.replace(/<image (.*?)src="([^"]+)"(.*?)>/gi, (match, attrs, src, rest) => {
                // 检查src是否以http开头  
                if (!src.toLowerCase().startsWith('http://') && !src.toLowerCase().startsWith('https://')) {
                    // 如果不是，则拼接新的src  
                    const newSrc = `${process.env.VUE_APP_WEBSC_API}${src}`;
                    // 返回替换后的完整标签  
                    return `<image style="width: 100px; height: 60px;position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);opacity: 0.2;" ${attrs}src="${newSrc}"${rest}>`;
                } else {
                    // 如果src以http开头，则不进行操作，直接返回原标签  
                    return match;
                }
            });

            // 第二步：给所有<td>元素添加相对定位  
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = updatedContent;
            const tds = tempDiv.getElementsByTagName('td');
            for (let i = 0; i < tds.length; i++) {
                tds[i].style.position = 'relative';
            }
            // 获取处理后的HTML字符串  
            updatedContent = tempDiv.innerHTML;
            return updatedContent;
        },
        // 刷新页面
        refreshSignature(isRefresh, data) {
            if (isRefresh) {
                putContract({
                    contractRichText: this.textRich,
                    id: this.form.contractId,
                    ...data
                }).then(res => {
                    this.$emit('refreshConfirmationLoad')
                    getCustomerDetail(this.form.contractId).then(res => {
                        this.textRichAcc = this.textRep(res.data.contractRichText)
                        this.form.serviceOrgStamp = res.data.serviceOrgStamp
                        this.form.serviceOrgSign = res.data.serviceOrgSign
                    });
                    // getContractPreview(this.form.contractId).then(list => {
                    //     console.log(res, '>>>>22323');
                    //     this.textRichAcc = this.textRep(list.msg)
                    // })
                })
            }
            this.signatureDetailVisible = false;
        },
    }
}
</script>

<style lang="scss" scoped>
.headerSty {
    display: flex;
    justify-content: space-between;
    width: 97%;


    .headerLeftSty {
        display: flex;
        align-items: center;

        .textSty {
            margin-left: 8px;
            font-size: 16px;
            font-weight: 700;
        }
    }
}

.btnFirSty {
    background: #7915F5;
    color: #fff;
    border: none;
}

.rickSty {
    border: 1px solid #999;
    height: 300px;
    overflow-y: auto;
}

.headerSty1 {
    width: 97%;

    .headerLeftSty {
        display: flex;
        align-items: center;

        .textSty1 {
            margin-left: 8px;
            font-size: 14px;
            font-weight: 700;
        }

        .textSty {
            margin-left: 8px;
            font-size: 16px;
            font-weight: 600;
        }
    }

}

.navSty {
    height: 15px;
    width: 5px;
    background: rgb(90, 156, 248);
}


.contSty {
    display: flex;

    .contLeftSty {
        height: 80px;
        width: 5px;
        background: rgb(90, 156, 248);
    }

    .allBlo {
        margin-left: 5px;
    }

    .LastBlockSty {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 132px;
        height: 30px;
        background: white;
        border-radius: 5px;
        color: rgb(90, 156, 248);
        border: 1px solid rgb(90, 156, 248);

        .el-icon-warning {
            color: rgb(90, 156, 248);
            font-weight: bolder;
            margin-right: 5px;
            font-size: 18px;
        }
    }

    .blockSty {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 132px;
        height: 30px;
        background: rgb(90, 156, 248);
        border-radius: 5px;
        color: white;

        .el-icon-check {
            color: white;
            font-weight: bolder;
            margin-right: 5px;
            font-size: 18px;
        }

        .el-icon-close {
            color: white;
            font-weight: bolder;
            margin-right: 5px;
            font-size: 18px;
        }
    }

    .lastTeSty {
        flex: 1;
        height: 120px;
        background: white;
        margin-left: 10px;
        border-radius: 5px;
        border: 1px solid rgb(90, 156, 248);
        overflow-y: auto;
    }
}

.text1 {
    font-size: 14px;
    font-weight: 500;
}

.text2 {
    font-size: 14px;
    color: #999;
}

.el-icon-arrow-right {
    color: rgb(90, 156, 248);
    font-weight: bolder;
    margin: 0 10px;
    font-size: 32px;
}
</style>